<template>
    <!-- 详情视图出口 -->
    <div v-if="route.name != 'historicalSeismicEvent'">
        <router-view></router-view>
    </div>
    <!-- 历史地震事件 -->
    <div class="contenEvent" v-if="route.name == 'historicalSeismicEvent'">
        <div class="map">
            <!-- 地图区域 -->
            <Index v-if="showBool" :dataType="dataType" :formSqlFilter="formSqlFilter" :drawGeomType="drawGeomType"
                 @getDrawGeom="getDrawGeom" @getAddress="getAddress"
                 :queryParams="queryParams" :queryFlag="queryFlag" @returnQueryFlag="returnQueryFlag"></Index>
            <!-- 右侧搜索 -->
            <div :class="open ? 'widthRighr1' : 'widthRighr2'">
                <!-- 搜索按钮 -->
                <span class="search" v-if="open" @click="open = false">搜索<el-icon>
                        <DArrowLeft />
                    </el-icon></span>
                <span class="search" v-if="!open" @click="open = true">搜索<el-icon>
                        <DArrowRight />
                    </el-icon></span>
                <div style="overflow: hidden;overflow-y: auto;height: 100%;">
                    <div>
                        <span class="selectTitle">图形选择</span><br/>
                        <el-radio-group v-model="radioSelect" @change="drawGeomTypeChange">
                            <el-radio label="1">圈选</el-radio>
                            <el-radio label="2">框选</el-radio>
                            <el-radio label="3">多边形</el-radio>
                            <el-radio label="4">行政区划</el-radio>
                        </el-radio-group>
                    </div>

                    <div style="margin-top: 16px;">
                        <span class="selectTitle">输入选择</span>
                    </div>
                    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
                        <el-form-item label="日期">
                            <el-form-item label-width="0px">
                                <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date"
                                    placeholder="开始时间" value-format="YYYY-MM-DD" :disabled-date="startDisableDate"/>
                            </el-form-item>
                            <span class="spanStyle">至</span>
                            <el-form-item>
                                <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date"
                                    placeholder="结束时间" value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="震级">
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.startMagnitude" placeholder="请输入" />
                            </el-form-item>
                            <span class="spanStyle">~</span>
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.endMagnitude" placeholder="请输入" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="经度">
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.startLongitude" placeholder="请输入" />
                            </el-form-item>
                            <span class="spanStyle">~</span>
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.endLongitude" placeholder="请输入" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="纬度">
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.startLatitude" placeholder="请输入" />
                            </el-form-item>
                            <span class="spanStyle">~</span>
                            <el-form-item label-width="0px">
                                <el-input style="width:140px" v-model="queryParams.endLatitude" placeholder="请输入" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="参考位置" prop="location">
                            <el-input style="width:300px" v-model="queryParams.location" placeholder="请输入参考位置" clearable />
                        </el-form-item>
                        <el-form-item label="行政区">
                            <el-form-item label-width="0px">
                                <el-select v-model="queryParams.province" placeholder="省" @change="chooseProvince" clearable
                                    value-key="id" style="width:140px;">
                                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <span class="spanStyle"></span>
                            <el-form-item label-width="0px">
                                <el-select v-model="queryParams.city" placeholder="市" @change="chooseCity"
                                    style="width:140px;" value-key="id" clearable>
                                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label=" ">
                            <el-form-item label-width="0px">
                                <el-select v-model="queryParams.county" placeholder="区县" @change="chooseCounty"
                                    style="width:140px;" value-key="id" clearable>
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <span class="spanStyle"></span>
                            <!-- <el-form-item label-width="0px">
                                <el-select v-model="queryParams.town" placeholder="乡镇" @change="chooseCounty"
                                    style="width:140px;" value-key="id" clearable>
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                        </el-form-item>
                        <el-form-item style="text-align: center;">
                            <!--<el-button type="primary" @click="handleQuery">检索</el-button>-->
                            <el-button type="primary" @click="submitQuery">检索</el-button>
                            <el-button type="primary" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-divider />
                    <div class="tableDiv">
                        <p style="display:flex;justify-content: space-around;align-items: center;">
                            <span class="selectTitle">查询结果</span>
                            <el-input v-model="queryParams.eventAbbrevia" placeholder="请输入关键词" style="width:200px;" @keydown.enter.prevent="submitQuery">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </p>
                        <el-table ref="tableRef" :data="dataList" stripe>
                            <el-table-column label="地震事件简称" align="center" prop="eventAbbrevia" show-overflow-tooltip />
                            <el-table-column label="参考位置" align="center" prop="location" show-overflow-tooltip />
                            <el-table-column label="日期" align="center" prop="occurrenceDate" show-overflow-tooltip />
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template #default="scope">
                                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                                    <!-- <el-button type="text" @click="handleDown(scope.row)">下载</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                        <p style="text-align: right;"><span style="cursor: pointer;color:#107ce5;"
                                @click="handleAllList">展开全部</span></p>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>
  
<script setup name="historicalSeismicEvent">
//地图
import Index from '@/map/informationRetrieval/historicalSeismicInformation/historicalSeismicEvent/index.vue';
import { getAllList } from "@/api/informationRetrieval/historicalSeismicEvent.js"
import { getProvince, getChildArea } from "@/api/system/division"
const { proxy } = getCurrentInstance()
const route = useRoute();
const router = useRouter();

const formatDate=(cellValue)=> {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue) 
  var year = date.getFullYear()
  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
  return year + '-' + month + '-' + day
}
//类型
const dataType = ref("ls434ysqzml");//历史地震事件强震
const showBool = ref(false);
const open = ref(false);
const dataList = ref();
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]);//区、县
const loading = ref(false);
const radioSelect = ref(); //图形选择
const data = reactive({
    queryParams: {
        page: 1,
        rows: 5,
        endTime: formatDate(new Date().getTime()),
        startTime: formatDate(new Date().getTime()-365 * 24 * 3600 * 1000 * 3),
        startLongitude: undefined,
        endLongitude: undefined,
        startLatitude: undefined,
        endLatitude: undefined,
        location: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        district: undefined,
        town: undefined,
        eventAbbrevia: undefined,
    },
    formSqlFilter: null,//查询图层过滤条件
})
const { queryParams,formSqlFilter } = toRefs(data);

// 跳转查看全部
function handleAllList() {
    router.push({
        path: '/informationRetrieval/historicalSeismicInformation/historicalSeismicEvent/viewAll',
        query: { ...queryParams.value, rows: 10 }
    })
}

// 跳详情页
function handleDetail(row) {
    router.push({
        path: '/informationRetrieval/historicalSeismicInformation/historicalSeismicEvent/earthquakeDisasterDataDetail',
        query: {
            occurrenceDate: row.occurrenceDate,
            occurrenceTime: row.occurrenceTime,
            location: row.location,
            magnitude: row.magnitude,
            eventAbbrevia:row.eventAbbrevia,
            latitude:row.latitude,
            longitude:row.longitude,
            depth:row.depth,
        }
    })
}

/** 搜索按钮操作 */
function handleQuery() {
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParams.value = {
        page: 1,
        rows: 5,
        startTime: undefined,
        endTime: undefined,
        startLongitude: undefined,
        endLongitude: undefined,
        startLatitude: undefined,
        endLatitude: undefined,
        location: undefined,
        province: undefined,
        city: undefined,
        county:undefined,
        district: undefined,
        town: undefined,
        eventAbbrevia: undefined,
    }
    radioSelect.value = '';
    drawGeomType.value = "清空";
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    proxy.$modal.loading()
    getAllList({ ...queryParams.value }).then(response => {
        loading.value = false;
        proxy.$modal.closeLoading();
        dataList.value = response.data.rows ? response.data.rows : [];
    }).catch(err=>{proxy.$modal.closeLoading();loading.value = false;});
}

// 跟据当前路由name是不是历史地震事件 来获取列表
function getListDetail() {
    if (route.name == 'historicalSeismicEvent') {
        showBool.value = true;
        initShowLayer();
        getList();
    } else {
        // getDetail(route.query.id)
    }
}

//地图圈选类型
const drawGeomType = ref("");
//选择地图圈选类型
function drawGeomTypeChange(value){
  if(value=="1"){
    drawGeomType.value = "圈选";
  }else if(value=="2"){
    drawGeomType.value = "框选";
  }else if(value=="3"){
    drawGeomType.value = "多边形";
  }else if(value=="4"){
    drawGeomType.value = "行政区划";
  }
}

//地图圈选空间数据
function getDrawGeom(geom){
  queryParams.value.geom = geom;
  console.log(geom);
  submitQuery();
}

//获取地图点击位置行政区划地址信息
function getAddress(obj){
  if(obj.province){
    queryParams.value.province = obj.province;//省
    queryParams.value.city = "";
    queryParams.value.county = "";
    queryParams.value.geom = "";
    submitQuery();
  }
}

//是否开始省市县查询定位
const queryFlag = ref(false);
//完成省市县定位
const returnQueryFlag = ()=>{
  //完成省市县查询定位
  queryFlag.value = false;
}

//确定查询
function submitQuery(){
  //开始省市县查询定位
  queryFlag.value = true;
  queryParams.value.page=1;
  getList();
  let sqlFilter = "";
  sqlFilter += "del_flag='0'";
  let province = queryParams.value.province;
  if(province){//省名称
    sqlFilter += " and province='"+province+"'";
  }
  let city = queryParams.value.city;
  if(city){//市名称
    sqlFilter += " and city='"+city+"'";
  }
  let county = queryParams.value.county;
  if(county){//县名称
    sqlFilter += " and county='"+county+"'";
  }
  let startTime = queryParams.value.startTime;
  if(startTime){//开始日期
    sqlFilter += " and occurrence_date>='"+startTime+"'";
  }
  let endTime = queryParams.value.endTime;
  if(endTime){//结束日期
    sqlFilter += " and occurrence_date<='"+endTime+"'";
  }
  let startMagnitude = queryParams.value.startMagnitude;
  if(startMagnitude){//最小震级
    sqlFilter += " and magnitude>="+startMagnitude;
  }
  let endMagnitude = queryParams.value.endMagnitude;
  if(endMagnitude){//最大震级
    sqlFilter += " and magnitude<="+endMagnitude;
  }
  let startLongitude = queryParams.value.startLongitude;
  if(startLongitude){//最小经度
    sqlFilter += " and longitude>="+startLongitude;
  }
  let endLongitude = queryParams.value.endLongitude;
  if(endLongitude){//最大经度
    sqlFilter += " and longitude<="+endLongitude;
  }
  let startLatitude = queryParams.value.startLatitude;
  if(startLatitude){//最小纬度
    sqlFilter += " and latitude>="+startLatitude;
  }
  let endLatitude = queryParams.value.endLatitude;
  if(endLatitude){//最大纬度
    sqlFilter += " and latitude<="+endLatitude;
  }
  let location = queryParams.value.location;
  if(location){//参考位置
    sqlFilter += " and location like '%"+location+"%'";
  }
  //空间数据
  let geom = queryParams.value.geom;
  if(geom){//空间数据wkt
    sqlFilter += " and st_intersects(st_geomfromtext('"+geom+"',4490), geom)";
  }
  //sql过滤条件
  formSqlFilter.value = sqlFilter;
}

//默认显示最近3年的历史地震事件图层
function initShowLayer(){
  let sqlFilter = "";
  sqlFilter += "del_flag='0'";
  //获取3年前日期
  let date = new Date();
  let year = date.getFullYear();
  year = year - 3;//最近3年
  let month = date.getMonth() + 1;
  if(month<10){
    month = "0" + month;
  }
  let day = date.getDate();
  if(day<10){
    day = "0" + day;
  }
  let startTime = year+"-"+month+"-"+day;
  //开始日期
  sqlFilter += " and occurrence_date>='"+startTime+"'";
  //sql过滤条件
  formSqlFilter.value = sqlFilter;
}

/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
    });
}

function chooseProvince(value) {
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.district = null;
    queryParams.value.province = value.name;
    cityData.value = [];
    areaData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}

function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    queryParams.value.district = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}

function chooseCounty(value) {
    queryParams.value.district = value.name;
    queryParams.value.county = value.name;
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};
getProvinceData();


onMounted(() => {
    getListDetail();
})
</script>
  
<style scoped lang="scss">
.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 20px;
    text-align: center;
}

.el-divider--horizontal {
    margin: 0px 0 12px;
    color: #cccccc;
}

.contenEvent {
    width: 100%;
    height: 100%;
    padding-top: 20px;

    .tableDiv {
        padding: 0px 10px;
    }

    .widthRighr1 {
        width: 0px;
        height: calc(100vh - 320px);
        background-color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        // padding: 20px 0px 0px 20px;

        .search {
            display: inline-block;
            position: absolute;
            right: 0px;
            top: 50%;
            left: -40px;
            transform: translateY(-38px);
            width: 40px;
            padding: 5px 10px;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            background: rgba($color: #000000, $alpha: 0.4);
            border-radius: 4px 0px 0px 4px;
            vertical-align: middle;
        }
    }

    .widthRighr2 {
        width: 420px;
        height: calc(100vh - 320px);
        background-color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        padding: 20px 0px 0px 20px;

        .search {
            display: inline-block;
            position: absolute;
            right: 0px;
            top: 50%;
            left: -40px;
            transform: translateY(-38px);
            width: 40px;
            padding: 5px 10px;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            background: rgba($color: #000000, $alpha: 0.4);
            border-radius: 4px 0px 0px 4px;
            vertical-align: middle;
        }
    }

    .map {
        height: 100%;
        //background: pink;
        flex: 1;
        position: relative;
    }

    .selectTitle {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
    }
}
</style>